<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        html,
        body {
            height: 100%;
            background: #f5f5f5;
        }

        /* .wrap {
            background: #f5f5f5;
        } */

        .main {
            width: 1200px;
            box-sizing: border-box;
            margin: 0 auto;
        }

        /* 标题栏 */
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
            line-height: 60px;
        }

        .title .left {
            font-weight: 200;
            color: #3b3b3b;
        }

        .title .right {
            display: flex;
        }

        .title .right>div {
            line-height: 20px;
            font-size: 16px;
            cursor: pointer;
            margin: 0 15px;
            box-sizing: border-box;
            padding: 3px;
        }

        .title .right .tab-active,
        #tab1:hover,
        #tab2:hover {
            color: #ff6700;
            border-bottom: 2px solid #ff6700;
        }


        /* 商品栏 */
        .goods {
            display: flex;
            margin-top: 10px;
        }

        .left-goods {
            height: 614px;
        }

        .right-goods {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }

        .right-goods .box {
            width: calc(100% / 4 - 15px);
            background: #fff;
            text-align: center;
            box-sizing: border-box;
            margin-bottom: 13px;
            height: 300px;
            display: block;
            text-decoration: none;
            padding: 20px 0;
        }

        /* 光标移入后的样式 */
        .goods a:hover {
            cursor: pointer;
            box-shadow:
                0.3px 0.3px 5.3px rgba(0, 0, 0, 0.02),
                1.1px 1.1px 17.9px rgba(0, 0, 0, 0.03),
                5px 5px 80px rgba(0, 0, 0, 0.05);
            transform: scale(1.01, 1.01);
            transition: all 0.3s ease;
        }

        .right-goods .item img {
            /* display: block; */
            width: 160px;
            height: 160px;
        }

        .right-goods .item .name,
        .right-goods .item .desc,
        .right-goods .item .price {
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .right-goods .item .name {
            font-size: 14px;
            font-weight: 400;
            color: #333;
            margin-bottom: 15px;
        }

        .right-goods .item .desc {
            margin: 0 10px 10px;
            height: 18px;
            font-size: 12px;
            color: #b0b0b0;
        }

        .right-goods .item .price {
            margin: 0 10px 10px;
            color: #ff6700;
        }

        .right-goods .item .price del {
            color: #b0b0b0;
            padding-left: 10px;
            text-decoration: line-through;
        }

        .right-goods .item .top,
        .right-goods .item .bottom {
            display: flex;
            align-items: center;
            height: 145px;
            justify-content: center;
            background: #fff;
            box-sizing: border-box;
            margin-bottom: 10px;
        }

        .right-goods .box .item .top .text {
            /* flex: 1; */
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .right-goods .self img {
            width: 80px;
            height: 80px;
        }

        .right-goods .box .item .top .text .name {
            width: 90px;
            white-space: pre-wrap;
            margin: 0 0 15px 0;
        }

        .right-goods .item .bottom {
            justify-content: space-evenly;
        }

        .right-goods .box .item .top .text {
            text-align: left;
        }

        .right-goods .item .bottom .text .name {
            margin: 0;
        }

        .right-goods .item .bottom .text .desc {
            margin: 0;
            text-align: left;
        }

        .right-goods .box .item .bottom .icon i {
            display: block;
            width: 48px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            background: url('./icon.png');
        }

        .right-goods .self {
            background: transparent;
            padding: 0;
        }

        .right-goods .self>a {
            display: block;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="main">
            <!-- 标题栏 -->
            <div class="title">
                <h2 class="left">智能穿戴</h2>
                <div class="right">
                    <div class="tab-active" id="tab1" onmouseover="myOver(this)">耳机</div>
                    <div id="tab2" onmouseover="myOver(this)">穿戴</div>
                </div>
            </div>
            <!-- 商品栏 -->
            <div class="goods">
                <!-- 左边大图 -->
                <a href="javascript:" class="left-goods">
                    <div class="left-goods">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c9550c95ee33a22dc8db677dada00f09.jpg?thumb=1&w=293&h=614&f=webp&q=90"
                            alt="" />
                    </div>
                </a>
                <!-- 耳机 -->
                <div class="right-goods" id="earphone">
                    <a href=":javascript:0" class="box">
                        <div class="item">
                            <div class="img">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208111200_c1016839eae2c1f5bb79d5afde498e81.png?thumb=1&w=160&h=160&f=webp&q=90"
                                    alt="" />
                            </div>
                            <h3 class="name">Xiaomi Buds 4 Pro</h3>
                            <p class="desc">48dB智能动态降噪｜骨声纹通话降噪 | 独立空间音频</p>
                            <div class="price"><span>999元</span><del>1999元</del></div>
                        </div>
                    </a>
                    <a href=":javascript:0" class="box">
                        <div class="item">
                            <div class="img">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202204211422_ce41ed00fe7fb79df35101222880121d.png?thumb=1&w=160&h=160&f=webp&q=90"
                                    alt="" />
                            </div>
                            <h3 class="name">Xiaomi Buds 3 Pro</h3>
                            <p class="desc">48dB智能动态降噪｜骨声纹通话降噪 | 独立空间音频</p>
                            <div class="price"><span>999元</span><del>1999元</del></div>
                        </div>
                    </a>
                    <a href=":javascript:0" class="box">
                        <div class="item">
                            <div class="img">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0b271a074e087848357aa61ae665b214.jpg"
                                    alt="" />
                            </div>
                            <h3 class="name">Xiaomi Buds 3</h3>
                            <p class="desc">48dB智能动态降噪｜骨声纹通话降噪 | 独立空间音频</p>
                            <div class="price"><span>999元</span><del>1999元</del></div>
                        </div>
                    </a>
                    <a href=":javascript:0" class="box">
                        <div class="item">
                            <div class="img">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205241527_fb27e27e6587254da27de5ba9c889512.png?thumb=1&w=250&h=250&f=webp&q=90"
                                    alt="" />
                            </div>
                            <h3 class="name">Redmi Buds 4</h3>
                            <p class="desc">48dB智能动态降噪｜骨声纹通话降噪 | 独立空间音频</p>
                            <div class="price"><span>999元</span><del>1999元</del></div>
                        </div>
                    </a>
                    <a href=":javascript:0" class="box">
                        <div class="item">
                            <div class="img">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11570d5371f16d2d9b19f504e09d01f0.jpg?thumb=1&w=250&h=250&f=webp&q=90"
                                    alt="" />
                            </div>
                            <h3 class="name">Redmi Buds 3</h3>
                            <p class="desc">48dB智能动态降噪｜骨声纹通话降噪 | 独立空间音频</p>
                            <div class="price"><span>999元</span><del>1999元</del></div>
                        </div>
                    </a>
                    <a href=":javascript:0" class="box">
                        <div class="item">
                            <div class="img">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202111052007_e8e92e67988ebaff6e075412a54c3c66.png?thumb=1&w=250&h=250&f=webp&q=90"
                                    alt="" />
                            </div>
                            <h3 class="name">小米真无线蓝牙耳机Air2 SE</h3>
                            <p class="desc">48dB智能动态降噪｜骨声纹通话降噪 | 独立空间音频</p>
                            <div class="price"><span>999元</span><del>1999元</del></div>
                        </div>
                    </a>
                    <a href=":javascript:0" class="box">
                        <div class="item">
                            <div class="img">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202210191430_3ad0e4809ce06a126dea9755adbb2a1b.png?thumb=1&w=250&h=250&f=webp&q=90"
                                    alt="" />
                            </div>
                            <h3 class="name">Xiaomi骨传导耳机</h3>
                            <p class="desc">48dB智能动态降噪｜骨声纹通话降噪 | 独立空间音频</p>
                            <div class="price"><span>999元</span><del>1999元</del></div>
                        </div>
                    </a>
                    <div class="box self">
                        <a href=":javascript:0">
                            <div class="item">
                                <div class="top">
                                    <div class="text">
                                        <p class="name">Xiaomi降噪蓝牙耳机Necklace</p>
                                        <div class="price">499元</div>
                                    </div>
                                    <div class="img">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209261427_67cd5fddb341f0e0fb0a2295e643b0d8.png?thumb=1&w=80&h=80&f=webp&q=90"
                                            alt="" />
                                    </div>
                                </div>
                            </div>
                        </a>
                        <a href=":javascript:0">
                            <div class="item">
                                <div class="bottom">
                                    <div class="text">
                                        <p class="name">浏览更多</p>
                                        <div class="desc">耳机</div>
                                    </div>
                                    <div class="icon">
                                        <i></i>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- 穿戴 -->
                <div class="right-goods" id="wearing" style="display: none;">
                    <a href="javascript:" class="box">
                        <div class="item">
                            <div class="img">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011906_e7f02b803d3da16ec56a611e790243ba.png?thumb=1&w=250&h=250&f=webp&q=90"
                                    alt="" />
                            </div>
                            <h3 class="name">小米手环7Pro</h3>
                            <p class="desc">全彩方形大屏 | 独立GPS定位 | 全天连续血氧饱和度监测</p>
                            <div class="price"><span>369元</span><del>399元</del></div>
                        </div>
                    </a>
                    <a href="javascript:" class="box">
                        <div class="item">
                            <div class="img">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205240036_9a8fbf274c0d419c5a0a49ef67cdd7c8.png?thumb=1&w=250&h=250&f=webp&q=90"
                                    alt="" />
                            </div>
                            <h3 class="name">小米手环7</h3>
                            <p class="desc">全彩方形大屏 | 独立GPS定位 | 全天连续血氧饱和度监测</p>
                            <div class="price"><span>369元</span><del>399元</del></div>
                        </div>
                    </a>
                    <a href="javascript:" class="box">
                        <div class="item">
                            <div class="img">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202204211417_27356c02de718e88afd3cf36eaba8097.png?thumb=1&w=250&h=250&f=webp&q=90"
                                    alt="" />
                            </div>
                            <h3 class="name">小米手环7&nbsp;NFC版</h3>
                            <p class="desc">全彩方形大屏 | 独立GPS定位 | 全天连续血氧饱和度监测</p>
                            <div class="price"><span>369元</span><del>399元</del></div>
                        </div>
                    </a>
                    <a href="javascript:" class="box">
                        <div class="item">
                            <div class="img">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202204211417_27356c02de718e88afd3cf36eaba8097.png?thumb=1&w=250&h=250&f=webp&q=90"
                                    alt="" />
                            </div>
                            <h3 class="name">XiaomiWatch S1</h3>
                            <p class="desc">全彩方形大屏 | 独立GPS定位 | 全天连续血氧饱和度监测</p>
                            <div class="price"><span>369元</span><del>399元</del></div>
                        </div>
                    </a>
                    <a href="javascript:" class="box">
                        <div class="item">
                            <div class="img">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208102330_fec8af4d5861f2c0a3fea2b8879ae859.png?thumb=1&w=160&h=160&f=webp&q=90"
                                    alt="" />
                            </div>
                            <h3 class="name">XiaomiWatch S1 Pro</h3>
                            <p class="desc">全彩方形大屏 | 独立GPS定位 | 全天连续血氧饱和度监测</p>
                            <div class="price"><span>369元</span><del>399元</del></div>
                        </div>
                    </a>
                    <a href="javascript:" class="box">
                        <div class="item">
                            <div class="img">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212271410_3e10e7156a846f5a8e101770602dc123.png?thumb=1&w=250&h=250&f=webp&q=90"
                                    alt="" />
                            </div>
                            <h3 class="name">Redmi 手环2</h3>
                            <p class="desc">全彩方形大屏 | 独立GPS定位 | 全天连续血氧饱和度监测</p>
                            <div class="price"><span>369元</span><del>399元</del></div>
                        </div>
                    </a>
                    <a href="javascript:" class="box">
                        <div class="item">
                            <div class="img">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212270226_d6ccc0602cb832e8fa523af78bf824f5.png?thumb=1&w=250&h=250&f=webp&q=90"
                                    alt="" />
                            </div>
                            <h3 class="name">Redmi Watch 3</h3>
                            <p class="desc">全彩方形大屏 | 独立GPS定位 | 全天连续血氧饱和度监测</p>
                            <div class="price"><span>369元</span><del>399元</del></div>
                        </div>
                    </a>
                    <!-- 浏览更多 -->
                    <div class="box self">
                        <a href="javascript:">
                            <div class="item">
                                <div class="bottom">
                                    <div class="text">
                                        <p class="name">浏览更多</p>
                                        <div class="desc">穿戴</div>
                                    </div>
                                    <div class="icon">
                                        <i></i>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // 获取元素
    let myTab1 = document.getElementById("tab1")
    let myTab2 = document.getElementById("tab2")
    let myactive1 = document.getElementById("earphone")
    let myactive2 = document.getElementById("wearing")
    //鼠标移入后切换至相应的商品列表
    function myOver(obj) {
        // console.log(obj)
        // 判断当前的元素
        if (obj === myTab1) {
            myactive2.style.display = "none"
            myactive1.style.display = "flex"
            // 新增类名
            obj.classList.add("tab-active");
            // 移除类名
            myTab2.classList.remove("tab-active")
        } else if (obj === myTab2) {
            myactive1.style.display = "none"
            myactive2.style.display = "flex"
            obj.classList.add("tab-active");
            myTab1.classList.remove("tab-active")
        }
    }
</script>

</html>